<template>
    <div>
        <SuperTable ref="table" path="/order/breach/index" :params="params" :columns="columns">
            <div slot="header-right">
                <Form ref="filter" :model="filter" inline>
                    <FormItem label="关键词">
                        <Input v-model="filter.keywords" clearable placeholder="订单号、商家订单号" style="width: 200px;" />
                    </FormItem>
                    <FormItem label="状态" prop="status">
                        <Select v-model="filter.status" clearable style="width: 80px">
                            <Option :value="-1">已作废</Option>
                            <Option :value="0">待执行</Option>
                            <Option :value="1">已违约</Option>
                        </Select>
                    </FormItem>
                    <Button type="primary" @click="handlFilter">筛选</Button>
                </Form>
            </div>
        </SuperTable>

        <Modal title="修改违约金" v-model="showModalBreach" :width="380" @on-cancel="handleCancelBreach">
            <Form ref="form" :model="form" :rules="rules" :label-width="80">
                <FormItem label="服务商" prop="name">
                    <Input v-model="form.name" disabled />
                </FormItem>
                <FormItem label="违约金" prop="breach_fee">
                    <InputNumber v-model="form.breach_fee" :min="0.01" :precision="2" :active-change="false" style="width: 50%;"></InputNumber>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="handleCancelBreach">取消</Button>
                <Button type="primary" :loading="submiting" @click="handleSubmitBreach">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import TableRows from '@/components/utils/table-rows.vue';
export default {
    components: {
        SuperTable,
        TableRows
    },
    data() {
        return {
            //修改违约金
            showModalBreach: false,
            submiting: false,
            form: {
                name: '',
                partner_osn: '',
                breach_fee: 0,
            },
            rules: {
                breach_fee: [
                    {required: true, type: 'number', message: '请输入违约金', trigger: 'blur'}
                ]
            },
            filter: {
                keywords: '',
                status: ''
            },
            params: {
                page: 1,
                pageSize: 10
            },
            columns: [
                {
                    title: '订单信息',
                    minWidth: 120,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`订单号：${params.row.order_sn}`),
                            h('p',[
                                h('span',`商家单号：${params.row.partner_osn || '-'}`),
                                h('span', {style:{color:'#fd9827'}}, params.row.order_partner ? '['+params.row.order_partner.status_text+']' : '')
                            ])
                        ])
                    }
                },
                {
                    title: '票档信息',
                    minWidth: 150,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`${params.row.order_partner.project_name}`),
                            h('p',[
                                h('span',`${params.row.order_partner.concert_name + '  ' + params.row.order_partner.sku_name}` + '  '),
                                h('span', {style:{color:'red'}}, `${params.row.order_partner.number}张`)
                            ]),
                        ])
                    }
                },
                {
                    title: '商家信息',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`商家名称：${params.row.partner.name}`),
                            h('p',`委托总额：${params.row.order_partner.partner_amount}`),
                        ])
                    }
                },
                {
                    title: '违约时间&违约金',
                    minWidth: 120,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`违约时间：${params.row.breach_time}`),
                            h('p',`违约金：${params.row.breach_fee}`),
                        ])
                    }
                },
                {
                    title: '操作时间&操作描述',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`${params.row.handle_time || '-'}`),
                            h('p',`${params.row.handle_remark || '-'}`),
                        ])
                    }
                },
                {
                    title: '违约状态',
                    key: 'status_text'
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    width: 120,
                    render: (h, params) => {
                        return h("div", [
                            h("Button", {
                                props: {
                                    type: "warning",
                                    size: "small",
                                    disabled: params.row.status != 0
                                },
                                on: {
                                    click: () => {
                                        this.form.name = params.row.partner.name
                                        this.form.partner_osn = params.row.partner_osn
                                        this.form.breach_fee = Number(params.row.breach_fee)
                                        this.showModalBreach = true;
                                    }
                                }
                            }, "修改"),
                            h("Button", {
                                style: {
                                    marginLeft: "5px"
                                },
                                props: {
                                    type: "primary",
                                    size: "small",
                                    disabled: params.row.status != 0
                                },
                                on: {
                                    click: () => {
                                        this.$Modal.confirm({
                                            title: "操作提示:",
                                            content: "<p>是否确认执行违约？执行后将扣除商家"+params.row.breach_fee+"元！</p>",
                                            onOk: () => {
                                                this.$ajax.post('/order/breach/action', {partner_osn: params.row.partner_osn}).then(res => {
                                                    this.$Message.success('操作成功');
                                                    this.$refs.table.init();
                                                }).catch(err => {
                                                    this.$Message.error(err.message || '操作失败');
                                                })
                                            }
                                        });
                                    }
                                }
                            }, "执行")
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        handlFilter() {
            const { filter } = this;
            this.params.keywords = filter.keywords;
            this.params.status = filter.status;
            this.$refs.table.init();
        },
        //修改违约金
        handleSubmitBreach() {
            if(this.submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    this.submiting = true;
                    let params = {
                        partner_osn: this.form.partner_osn,
                        breach_fee: this.form.breach_fee
                    }
                    this.$ajax.post('/order/breach/change_breach', params).then(res => {
                        this.$Message.success('操作成功');
                        this.submiting = false;
                        this.handleCancelBreach();
                        this.$refs.table.init();
                    }).catch(err => {
                        this.submiting = false;
                        this.$Message.error(err.message || '操作失败');
                    })
                }
            })
        },
        handleCancelBreach(){
            this.showModalBreach = false;
            setTimeout(() => {
                this.form.name = '';
                this.form.partner_osn = '';
                this.form.breach_fee = 0;
            }, 300)
        },
    }
}
</script>